<template>
	<view class="min-h-[100vh] bg-background">
		<view class="p-[20rpx]" v-if="list.length">
			<up-waterfall v-model="list" ref="uWaterfallRef">
				<template v-slot:left="{ leftList }">
					<view class="mr-[10rpx] mb-[20rpx] last:mb-0" v-for="item in leftList" :key="item.id" @click="toBusinessDetail(item.id)">
						<up-transition :show="true" mode="fade">
							<view class="bg-white rounded-[16rpx] p-[16rpx]">
								<up-lazy-load :image="$setBaseUrl(item.pic)" width="100%" height="100%" mode="widthFix"></up-lazy-load>
								<view class="mt-[16rpx]">
									<view class="text-[28rpx] font-bold line-clamp-1">{{ item.name }}</view>
									<view class="my-[8rpx] text-[24rpx] text-gray">
										<text>{{ item.tagFixationList.join('丨') }}</text>
									</view>
									<view class="flex flex-wrap items-center gap-[8rpx] mb-[8rpx]">
										<view class="tag" v-for="it in item.tagVariableList" :key="it">{{ it }}</view>
									</view>
									<view class="text-gray text-[28rpx]">
										<text class="text-[32rpx] text-[#E5403E] font-bold">{{ item.price }}</text>
										<text class="ml-[8rpx]">元</text>
									</view>
								</view>
							</view>
						</up-transition>
					</view>
				</template>
				<template v-slot:right="{ rightList }">
					<view class="ml-[10rpx] mb-[20rpx] last:mb-0" v-for="item in rightList" :key="item.id" @click="toBusinessDetail(item.id)">
						<up-transition :show="true" mode="fade">
							<view class="bg-white rounded-[16rpx] p-[16rpx]">
								<up-lazy-load :image="$setBaseUrl(item.pic)" width="100%" height="100%" mode="widthFix"></up-lazy-load>
								<view class="mt-[16rpx]">
									<view class="text-[28rpx] font-bold line-clamp-1">{{ item.name }}</view>
									<view class="my-[8rpx] text-[24rpx] text-gray">
										<text>{{ item.tagFixationList.join('丨') }}</text>
									</view>
									<view class="flex flex-wrap items-center gap-[8rpx] mb-[8rpx]">
										<view class="tag" v-for="it in item.tagVariableList" :key="it">{{ it }}</view>
									</view>
									<view class="text-gray text-[28rpx]">
										<text class="text-[32rpx] text-[#E5403E] font-bold">{{ item.price }}</text>
										<text class="ml-[8rpx]">元</text>
									</view>
								</view>
							</view>
						</up-transition>
					</view>
				</template>
			</up-waterfall>
			<up-loadmore :status="loadmore" />
		</view>
		<view class="flex h-[80vh] w-full items-center justify-center" v-else>
			<up-empty mode="list"></up-empty>
		</view>
	</view>
</template>

<script setup>
import { reactive, ref } from 'vue';
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
import { getCollectGoods } from '@/config/api/goods';
import utils from '@/utils/utils';
onLoad(async () => {
	await resetList();
});
const { list, resetList, uWaterfallRef, loadmore } = useList();
// 列表
function useList() {
	onReachBottom(() => {
		if (list.value.length < total.value) {
			loadmore.value = 'loading';
			pagesParams.pageNum++;
			getList();
		} else {
			utils.showToast('已经到底了~');
		}
	});
	const list = ref([]);
	const loadmore = ref('loadmore');
	const uWaterfallRef = ref(null);
	const total = ref(0);
	const pagesParams = reactive({
		type: 1,
		pageNum: 1,
		pageSize: 10
	});
	const getList = async () => {
		try {
			const res = await getCollectGoods(pagesParams);
			total.value = res.total;
			list.value = list.value.concat(res.rows);
			if (list.value.length >= total.value) {
				loadmore.value = 'nomore';
			} else {
				loadmore.value = 'loading';
			}
		} catch (e) {
			//TODO handle the exception
		}
	};
	const resetList = () => {
		uWaterfallRef.value && uWaterfallRef.value.clear();
		list.value = [];
		pagesParams.pageNum = 1;
		getList();
	};
	return {
		list,
		loadmore,
		getList,
		resetList,
		pagesParams,
		uWaterfallRef,
		total
	};
}
const toBusinessDetail = (id) => {
	uni.navigateTo({
		url: `/pages/businessDetail/businessDetail?id=${id}`
	});
};
</script>

<style scoped lang="scss">
.tag {
	@apply px-[10rpx] py-[2rpx] bg-[rgba(195,154,113,0.1)] rounded-[4rpx] text-second text-[20rpx] mr-[8rpx] last:mr-0;
}
</style>
